<template lang="pug">
  .SetMoreInsuranceModal
    Modal(
      v-model="isShowSetMoreInsuranceModal"
      title="添加险种"
      class-name="vertical-center-modal"
    )
      Form.ivu-row(ref="formData" :model="formData" :rules="rules" :label-width="100")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'checkbox'")
            Checkbox(:indeterminate="indeterminate" :value="checkAll" @on-change="handleCheckAll") 全部
            CheckboxGroup(v-model="formData[item.model]" @on-change="checkAllGroupChange")
               Checkbox.display-block(v-for="(c_item, idx) of socialsecuritylist" :key="idx" :label="c_item.value") {{c_item.label}}
            //- Tree.h200.overflow-y-scroll(:data="permissionList" ref="tree" show-checkbox check-directly @on-check-change="treeCheckChange")
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import { EmployeeInsuredApi } from '@/api/EmployeeInsured.api.js'

export default {
  name: 'SetMoreInsuranceModal',

  watch: {
  },

  props: ['socialsecuritylist'],

  data () {
    return {
      ids: null,
      securityType: null, // 商保传3，其他传0
      // socialsecuritylist: [],
      isShowSetMoreInsuranceModal: false,
      formData: {
        securityTypeCode: []
      },
      formItem: [
        { type: 'checkbox', label: '险种', placeholder: '请选择险种', prop: 'securityTypeCode', model: 'securityTypeCode', style: 'ivu-col-span-24' }
      ],
      rules: {
        securityTypeCode: [
          { required: true, message: '请选择险种' }
        ]
      },
      permissionList: [], // 菜单权限列表
      selectNode: [],
      indeterminate: false,
      checkAll: false,
    }
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowSetMoreInsuranceModal = false
    },

    show () {
      this.$refs.formData.resetFields()
      this.isCanSubmit = true
      this.isShowSetMoreInsuranceModal = true
    },

    async handleSubmit () {
      this.isCanSubmit = false
      var params = {
        ids: this.ids.join(','),
        securityType: this.securityType,
        SecurityTypeCode: this.formData.securityTypeCode.join(',')
      }
      console.log('提交多个险种 params: ', params)
      let res = await EmployeeInsuredApi.batchAddSecurity(params)
      console.log('设置多个险种res: ', res)
      if (res.status === 200 && res.data.success) {
        this.isShowSetMoreInsuranceModal = false
        this.$Message.success(res.data.message)
        this.$emit('query')
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
        this.isCanSubmit = true
      }
    },

    handleCheckAll () {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false

      var tempCodeArr = []
      if (this.checkAll) {
        this.socialsecuritylist.map(item => {
          tempCodeArr.push(item.value) // code数组
        })
      } else {
        this.checkAll = false
      }
      this.formData.securityTypeCode = tempCodeArr
    },

    checkAllGroupChange (data) {
      var tempCodeArr = []
      if (data.length === this.socialsecuritylist.length) {
        this.indeterminate = false
        this.checkAll = true
      } else if (data.length > 0) {
        this.indeterminate = true
        this.checkAll = false
      } else {
        this.indeterminate = false
        this.checkAll = false
      }

      this.socialsecuritylist.map(item => {
        if (data.indexOf(item.value) !== -1) {
          tempCodeArr.push(item.value) // code数组
        }
      })

      this.formData.securityTypeCode = tempCodeArr
    }
  }
}
</script>

<style lang="less" scoped>

</style>
